<template>
  <el-container>
    <el-header>
      <div class="header-logo">
        <a class="header-logo-a" href="javascript:void(0)">Shop+ <span class="header-logo-a-span">后台管理系统</span></a>
      </div>
      <div class="header-info">
        <div>
          <el-dropdown @command="handleCommand" :hide-on-click="false">
            <span class="el-dropdown-link">
              <el-avatar icon="el-icon-user-solid" :size="25" style="float: left; margin-right: 3px"></el-avatar>
              {{ userInfo.username }}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item icon="el-icon-s-custom">您好，{{ userInfo.username }}</el-dropdown-item>
                <el-dropdown-item icon="el-icon-user" command="info" divided>个人资料</el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-close" command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu default-active="overview" class="el-menu-vertical-demo" router
          ><!-- @open="handleOpen" @close="handleClose" :collapse="isCollapse" -->
          <el-menu-item index="overview">
            <i class="el-icon-help"></i>
            <template #title>仪表盘</template>
          </el-menu-item>
          <el-menu-item index="usermanagement">
            <i class="el-icon-user"></i>
            <template #title>用户管理</template>
          </el-menu-item>
          <el-submenu index="3">
            <template #title>
              <i class="el-icon-document"></i>
              <span>订单管理</span>
            </template>
            <el-menu-item index="ordermanagement">全部订单</el-menu-item>
            <el-menu-item index="ordernoshipment">待发货订单</el-menu-item>
            <el-menu-item index="orderaftersales">售后订单</el-menu-item>
            <el-menu-item index="ordercompleted">已完成订单</el-menu-item>
          </el-submenu>
          <el-submenu index="4">
            <template #title>
              <i class="el-icon-setting"></i>
              <span>设置</span>
            </template>
            <el-menu-item index="4-1">个人资料</el-menu-item>
            <el-menu-item index="4-2">公告设置</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-main>
          <div style="height: 100%" ref="main">
            <router-view></router-view>
          </div>
        </el-main>
        <el-footer>
          <my-footer></my-footer>
        </el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>
<script setup>
import myFooter from './Footer'
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
let userInfo = reactive({})
let logout = () => {
  window.sessionStorage.clear()
  proxy.$router.push('/login')
  proxy.$message({
    message: '退出登录成功！',
    type: 'success'
  })
}
let handleCommand = (command) => {
  switch (command) {
    case 'info':
      proxy.$message({
        message: '功能开发中！',
        type: 'warning'
      })
      break
    case 'logout':
      logout()
      break
  }
}
onMounted(() => {
  var h = proxy.$refs.main.offsetHeight
  proxy.$store.commit('editMainHeight', h)
  var username = window.sessionStorage.getItem('username')
  var password = window.sessionStorage.getItem('password')
  userInfo.username = username
  userInfo.password = password
})
</script>
<style lang="less" scoped>
.el-main {
  background-color: #fcfcfc;
}
.el-container {
  height: 100%;
}
.el-header {
  border-bottom: 1px solid #eee;
  .header-logo {
    float: left;
    font-size: 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .header-logo-a {
      color: #5b5b5b;
      text-decoration: none !important;
      .header-logo-a-span {
        color: black;
        font-size: 13px;
      }
    }
  }
  .header-info {
    float: right;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    .el-dropdown-link {
      height: 25px;
      line-height: 25px;
    }
  }
}
.el-aside {
  .el-menu-vertical-demo {
    height: 100%;
    border-color: #eee !important;
  }
}
.el-main {
}
.el-footer {
  border-top: 1px solid #eee;
}
</style>
